<template>
  <view class="container">
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#ffffff' }"
      :border-bottom="false"
      title="我的商户"
    >
    </u-navbar>

    <view class="searchBox">
      <u-search
        placeholder="请输入SN/商户名称搜索"
        v-model="keyword"
        bgColor="#F7F7F7"
        shape="square"
        @change="searchChange"
      ></u-search>
    </view>

    <view class="dataBox">
      <image
        class="dataBox-bg"
        src="/static/images/income-dataShow.png"
        mode="widthFix"
      ></image>
      <view class="dataBox-content">
        <view class="header">
          <view class="value">12534</view>
          <view class="label">团队总商户数</view>
          <image class="btn" src="/static/images/wdsh-btn.png" mode="widthFix"></image>
        </view>
        <view class="bottom">
          <view class="item">
            <view class="label">自营商户数</view>
            <view class="value">12</view>
            <view class="compare">较上月 <text class="up">+12</text></view>
          </view>
          <view class="item">
            <view class="label">下级团队商户数</view>
            <view class="value">51</view>
            <view class="compare">较上月 <text class="down">-3</text></view>
          </view>
        </view>
      </view>
    </view>

    <view class="tabBox">
      <u-tabs
        :list="tabList"
        :is-scroll="false"
        bgColor="transparent"
        :current="tabCurrent"
        @change="tabsChange"
      ></u-tabs>
    </view>

    <view class="tabs">
      <view class="tab" :class="{ active: currentTab === 0 }" @click="tabChange(0)"
        >全部</view
      >
      <view class="tab" :class="{ active: currentTab === 1 }" @click="tabChange(1)"
        >未激活</view
      >
      <view class="tab" :class="{ active: currentTab === 2 }" @click="tabChange(2)"
        >已激活</view
      >
      <view class="tab" :class="{ active: currentTab === 3 }" @click="tabChange(3)"
        >已达标</view
      >
    </view>

    <view class="row">
      <view class="total">
        <text>总计(584户) 今日激活(12台)</text>
        <image src="/static/images/icon-tzgg.png" mode="widthFix"></image>
      </view>
      <view @click="showPicker = true" class="sort">
        <text>交易量排序</text>
        <u-icon name="arrow-down" color="#333333" size="28"></u-icon>
      </view>
    </view>

    <view class="sections">
      <view class="section" @click="navigateTo('/pages/home/basicDetails')">
        <view class="section-header">
          <view class="name">SN:000214656555846</view>
          <view class="other">升级代理</view>
        </view>

        <view class="row mt30 mb30">
          <view class="label">品牌</view>
          <view class="value">联动优势</view>
        </view>

        <view class="row mb30">
          <view class="label">商户名称</view>
          <view class="value">张三三</view>
        </view>

        <view class="row mb30">
          <view class="label">总交易额</view>
          <view class="value">3,333.32</view>
        </view>

        <view class="row mb30">
          <view class="label">是否羊毛</view>
          <view class="value">是</view>
        </view>

        <view class="row mb30">
          <view class="label">上月交易额</view>
          <view class="value">3,333.32</view>
        </view>

        <view class="row mb30">
          <view class="label">本月交易额</view>
          <view class="value">0</view>
        </view>

        <view class="row mb30">
          <view class="label">绑定时间</view>
          <view class="value">2024-04-21 16:22:31</view>
        </view>

        <view class="row mb30">
          <view class="label">政策类型</view>
          <view class="value">官返版(299押)</view>
        </view>

        <view class="row mb30">
          <view class="label">距上次交易时间</view>
          <view class="value">9天</view>
        </view>

        <view class="row mb30">
          <view class="label">绑定汇数生活</view>
          <view class="value">已绑定</view>
        </view>

        <view class="section-bottom">
          <view class="btn">商户位置地图</view>

          <view class="btn">达标返现记录</view>

          <view class="btn">联系商户</view>

          <view class="btn1">商户让利</view>
        </view>
      </view>
    </view>
    <u-picker
      v-model="showPicker"
      mode="selector"
      :range="selector"
      @confirm="pickerConfirm"
    ></u-picker>
  </view>
</template>

<script>
import util from '@/common/utils.js';

export default {
  data() {
    return {
      currentTab: 0,
      keyword: '',
      tabCurrent: 0,
      tabList: [
        {
          name: '全部',
          count: 0,
        },
        {
          name: '汇付天下',
          count: 0,
        },
        {
          name: '联动优势',
          count: 0,
        },
        {
          name: '拉卡拉',
          count: 0,
        },
        {
          name: '付临门',
          count: 0,
        },
      ],
      showPicker: false,
      selector: [1, 2, 3],
    };
  },
  onLoad(e) {},
  methods: {
    searchChange(value) {},
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    tabChange(index) {
      this.currentTab = index;
    },
    tabsChange(index) {
      this.tabCurrent = index;
    },
    pickerConfirm(value) {},
  },
};
</script>

<style lang="scss" scope>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 0 60rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

.searchBox {
  padding: 10rpx 30rpx;
  background-color: #ffffff;
}

.dataBox {
  position: relative;
  margin-top: 30rpx;
  width: 100%;
  padding: 0 30rpx;
  .dataBox-bg {
    width: 100%;
    height: auto;
  }
  .dataBox-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 50rpx 60rpx 50rpx;
    line-height: 1;
    .header {
      width: 100%;
      text-align: left;
      .value {
        font-family: DIN, sans-serif;
        font-weight: bold;
        font-size: 48rpx;
        color: #ffeacc;
      }
      .label {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba($color: #ffffff, $alpha: 0.5);
      }
      .btn {
        position: absolute;
        top: 65rpx;
        right: 60rpx;
        width: 238rpx;
        height: auto;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 50rpx;
      text-align: center;
      .item {
        flex: 1;
        min-width: 0;
        .label {
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 22rpx;
          color: rgba($color: #ffffff, $alpha: 0.5);
        }
        .value {
          margin-top: 10rpx;
          font-family: DIN, sans-serif;
          font-weight: bold;
          font-size: 32rpx;
          color: #ffeacc;
        }
        .compare {
          margin-top: 10rpx;
          font-family: PingFang SC, sans-serif;
          font-weight: 400;
          font-size: 22rpx;
          color: #ffffff;
          .up {
            color: #f03434;
          }

          .down {
            color: #29cc7a;
          }
        }
      }
    }
  }
}

.tabBox {
  margin-top: 10rpx;
  width: 100%;
  padding: 0 30rpx;
}

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
  width: 100%;
  padding: 0 30rpx;
  overflow: hidden;
  .tab {
    position: relative;
    width: 120rpx;
    height: 48rpx;
    line-height: 48rpx;
    font-weight: 500;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    text-align: center;
    border-radius: 24rpx;
  }

  .active {
    color: #b7926e;
    background: #f5e9dc;
  }
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .label {
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    text-align: left;
  }

  .value {
    font-weight: 400;
    font-size: 24rpx;
    color: #333333;
    text-align: right;
  }
}

.total {
  position: relative;
  display: inline-block;
  margin-top: 20rpx;
  padding: 0 30rpx;
  width: auto;
  text {
    position: relative;
    font-weight: 800;
    font-size: 28rpx;
    color: #333333;
    z-index: 9;
  }
  image {
    position: absolute;
    top: -5rpx;
    right: 10rpx;
    width: 32rpx;
    height: 32rpx;
    z-index: 1;
  }
}

.sort {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 0 30rpx 0 60rpx;
  width: auto;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  text {
    margin-right: 10rpx;
  }
}

.sections {
  width: 100%;
  padding: 0 30rpx;
}

.mb30 {
  margin-bottom: 30rpx;
}

.mt30 {
  margin-top: 30rpx;
}

.section {
  margin-top: 30rpx;
  width: 100%;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .section-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 30rpx;
    border-bottom: 1rpx solid #e6e6e6;
    .name {
      font-weight: 800;
      font-size: 28rpx;
      color: #333333;
    }
    .other {
      font-weight: 400;
      font-size: 28rpx;
      color: #b7926e;
    }
  }
  .section-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 30rpx 0 0;
    border-top: 1rpx solid #e6e6e6;
    .btn {
      height: 48rpx;
      line-height: 48rpx;
      padding: 0 12rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #b7926e;
      text-align: center;
      background: #f5e9dc;
      border-radius: 24rpx;
    }
    .btn1 {
      height: 48rpx;
      line-height: 48rpx;
      padding: 0 12rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      background: linear-gradient(90deg, #d9b189, #c5a27f);
      border-radius: 24rpx;
    }
  }
}
</style>
